<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body,
        html {
            width: 100%;
            height: 100%;
            background-color: darkslategray;
        }

        .boxes {
            width: 700px;
            margin: 100px auto;
        }

        .boxes > div {
            width: 300px;
            height: 300px;
            background-color: black;
            margin: 25px;
            float: left;
            position: relative;
        }

        .boxes .box01 > ul {
            width: 120px;
            height: 90px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .boxes .box01 > ul > li {
            float: left;
            width: 20px;
            height: 90px;
            margin-right: 4px;
            background-color: #67CF22;
            list-style: none;
            animation: animation01 1.2s infinite;
        }

        .boxes .box01 > ul > li:nth-child(1) {
            animation-delay: 0.4s;
        }

        .boxes .box01 > ul > li:nth-child(2) {
            animation-delay: 0.5s;
        }

        .boxes .box01 > ul > li:nth-child(3) {
            animation-delay: 0.6s;
        }

        .boxes .box01 > ul > li:nth-child(4) {
            animation-delay: 0.7s;
        }

        .boxes .box01 > ul > li:nth-child(5) {
            animation-delay: 0.8s;
        }

        @keyframes animation01 {
            0% {
                background-color: #67CF22;
                transform: scale(1);
            }
            20% {
                background-color: white;
                transform: scaleY(2);
            }
            100% {
                background-color: #67CF22;
                transform: scale(1);
            }
        }

        /*第二个*/

        .boxes > div .container {
            width: 120px;
            height: 120px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .boxes .box02 .rotateXY {
            width: 120px;
            height: 120px;
            background-color: #67CF22;
            /*设置为宽度一半就是圆*/
            border-radius: 60px;
            animation: animation02 3s infinite;
        }

        @keyframes animation02 {
            0% {
                transform: rotateX(0deg) rotateY(180deg);
            }
            /*X Y的先后顺序不能颠倒*/
            50% {
                background-color: white;
                transform: rotateX(180deg) rotateY(180deg);
            }
            100% {
                transform: rotateX(180deg) rotateY(0deg);
            }
        }

        /*第三个*/

        .boxes .box03 > div > div {
            width: 120px;
            height: 120px;
            background-color: #67CF22;
            border-radius: 60px;
            position: absolute;
            top: 0;
            left: 0;
            animation: animation03 2s infinite;
        }

        .boxes .box03 .scale02 {
            animation-delay: 1s;
        }

        @keyframes animation03 {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1);
                opacity: 0.5;
            }
            100% {
                transform: scale(0);
            }
        }

        /*第四个*/

        .boxes .box04 > div > div {
            position: absolute;
            top: 0;
            left: 0;
            width: 60px;
            height: 60px;
            background-color: #67CF22;
            animation: animation04 2s infinite;
            /*transform-origin: 100% 100%;*/
        }

        .boxes .box04 .move02 {
            animation-delay: 1s;
        }

        @keyframes animation04 {
            0% {
                transform: translateX(0) translateY(0) rotate(0deg);
            }
            25% {
                transform: scale(0.2) translateX(60px) translateY(0) rotate(90deg);
            }
            50% {
                transform: translateX(60px) translateY(60px) rotate(180deg);
            }
            75% {
                transform: translateX(0) translateY(60px) rotate(270deg);
            }
            100% {
                transform: translateX(0) translateY(0) rotate(360deg);
            }
        }
    </style>
</head>

<body>

<div class="boxes">

    <div class="box01">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <!--黑框-->
    <div class="box02">
        <!--定位居中容器-->
        <div class="container">
            <!--动画元素-->
            <div class="rotateXY">
            </div>
        </div>
    </div>

    <div class="box03">
        <div class="container">
            <div class="scale01">
            </div>
            <div class="scale02">
            </div>
        </div>
    </div>

    <div class="box04">
        <div class="container">
            <div class="move01">
            </div>
            <div class="move02">
            </div>
        </div>
    </div>
</div>
</body>

</html>